<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HighJ-Teacher</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>
<body>
<div class="page-header">
    <h1>Welcome to the Grade Management System<small>Please select the desired action</small></h1>
</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-info" id="btn2" onclick="course()">My courses</button>
    </div>

    <div class="btn-group" role="group">
        <form action="/logout">
            <button type="submit" class="btn btn-success" id="btn3">Logout
            </button>
        </form>
    </div>
</div>

<table class="table table-hover">
    <thead id="th">
    </thead>
    <tbody id="tb">

    </tbody>
</table>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">课程成绩信息</h4>
            </div>
            <div class="modal-body">
                <form id="formSC">
                    <input hidden="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label for="sid">学号</label>
                        <input type="text" class="form-control" id="sid" name="sid">
                    </div>
                    <div class="form-group">
                        <label for="cid">课号</label>
                        <input type="text" class="form-control" id="cid" name="cid">
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="Insert score">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    function course() {
        $.ajax({
            url: "/webapi/teacher/getcourse"
        }).done(function (rs) {
            var len = rs.data.length;
            var htmla = "<tr>"
                + "<th>" + "CID" + "</th>"
                + "<th>" + "CNAME" + "</th>"
                + "<th>" + "CLASS" + "</th>"
                + "<th>" + "CREDITS" + "</th>"
                + "</tr>";
            var htmlb = "";
            for (var i = 0; i < len; i++) {
                var item = rs.data[i];
                htmlb += "<tr>"
                    + "<td>" + item.cid + "</td>"
                    + "<td>" + item.cname + "</td>"
                    + "<td>" + item.class1 + "</td>"
                    + "<td>" + item.credits + "</td>"
                    + "<td><a href='#' onclick='gradeManagement(" + item.cid + ");'>课程成绩管理</a></td>"
                    + "</tr>";
            }
            $("#th").html(htmla);
            $("#tb").html(htmlb);
        })
    }

    function gradeManagement(cid) {
        $.ajax({
            url: '/webapi/teacher/getgrade/' + cid,
        }).done(function (rs) {
            var len = rs.data.length;
            var htmla = "<tr>"
                + "<th>" + "学号" + "</th>"
                + "<th>" + "课号" + "</th>"
                + "<th>" + "分数" + "</th>"
                + "</tr>";
            var htmlb = "";
            for (var i = 0; i < len; i++) {
                var item = rs.data[i];
                var scid = JSON.stringify(item.scid).replace(/"\"/g, "'");
                htmlb += "<tr>"
                    + "<td>" + item.scid.sid + "</td>"
                    + "<td>" + item.scid.cid1 + "</td>"
                    + "<td>" + item.score + "</td>"
                    + "<td><a href='#' onclick='score(" + scid + ");'>Score</a></td>"
                    + "</tr>";
            }
            $("#th").html(htmla);
            $("#tb").html(htmlb);
        })
    }

    function score(scid) {
        $('#myModal').modal('show')
        $.ajax({
            url: '/webapi/teacher/getsc/',
            data: scid
        }).done(function (rs) {
            $('#sid').val(rs.data.scid.sid);
            $('#cid').val(rs.data.scid.cid1);
            $('#score').val(rs.data.score);
        })
    }

    function save() {
        var cid1 = $("#cid").val();
        var data = $("#formSC").serialize();
        $.ajax({
            url: '/webapi/teacher/updatesc',
            data: data
        }).done(function () {
            gradeManagement(cid1);
            $('#myModal').modal('hide')
        })

    }
</script>
</body>
</html>